<style>
   /*品牌列表*/
   .brand-type{
    background: #fff;
  }
  .brand-type .type-attrs{
    border-bottom: 1px dashed #e5e5e5;
    overflow: hidden;	
  }
  .brand-type .type-attrs .attr_name{
    float: left;
    color: #888888;
    width: 8%;
    text-indent: 22px;
    background-color: #e8e8e8;
    height: 40px;
    line-height: 40px;
  }
  .brand-type .type-attrs .attr_Values {
   position: relative;
   float: left;
   background-color: #fff;
   width: 92%;
 }
 .brand-type .type-attrs  .attr_Values ul {
  position: relative;
  margin-right: 80px;
  margin-left: 10px;
  clear: both;
  overflow: hidden;

}
.brand-type .type-attrs  .attr_Values ul.attr_list{
  height: 40px;
  line-height: 40px;
  transition: 0.5s;
}
.brand-type .type-attrs  .attr_Values ul.attr_list.attr_more{
  height: auto;
}
.attr_Values ul li {
  float: left;
  padding-right: 40px;
}
.attr_Values ul li a {
  display: block;
  white-space: nowrap;
}
.brand-type .type-attrs a:hover{
  color:#333;
}
.brand-type .type-attrs .attr_more_select{
  position: absolute;
  right: 40px;
  top:0;
  height: 40px;
  line-height: 40px;
  color:#1c1c1c;
}
.brand-type .type-attrs .attr_more_select a:hover{
 color:#1c1c1c;
}
.brand-type .type-attrs.clear-boder{
  border-bottom: 0
}
.brand-type .type-attrs .attr_more_select i{
  display: block;
  position: absolute;
  right: -26px;
  width: 18px;
  height: 18px;
}
.brand-type .type-attrs .attr_more_select .ui_c_arrow{
  top: 22px;
  transition: 0.5s;
}
.brand-type .type-attrs .attr_more_select.on .ui_c_arrow{
  top:12px;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  transform: rotate(-180deg);
  right: -18px;
}
.breadcrumb{background-color: #e8e8e8;}


@media(min-width:1170px)
{
  .list-item{
    width: 20%;
  }

}
.list{
  background-color: #f4f4f4; 
}
.list-item{
  padding: 0px 5px;
  margin-bottom: 10px;
}
.item-contain{
  background-color: #fff;
  padding: 10px;
}
.item-contain p{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.brand_icon{
  float: left;
  margin-right: 8px;
  height:50px;
}

.brand-title p{
  margin: 0px;
  font-size: 1em;
}

.item img{
  width: 100%; 
}
.item-price{
  margin-top: 1em;
  margin-bottom: 0.5em;

}
.item-price .price{
  color: #ca0f1c;
  font-size: 1.3em;
  font-weight: bold;
}
.item-price .sale{
  float: right;
  background: #ca0f1c;
  padding: 0px 10px;
  color: white;
}
.nav-filter{
  background-color: #fff;
  padding: 0.6em ;
}
.nav-filter li{
  float: left;
  list-style-type: none;
  border-right:  1px solid #888;
  width: 60px;
  text-align: center;
}
.nav-filter a{
  color: #888;
}
.nav-filter a:hover,.nav-filter a:active{
  color: #000;
}
.nav-filter li img{
  width: 10px;
  margin-left: 5px;
}

.nav-filter .item-count{
  width: auto;
  border-right:  none;
  color: #888;
  margin-left: 1em;
}
.page{
  float: right;
}
.page .num{
  color: #888;
}
.page img{
  width: 20px;
}

.select-list li{
	padding-right:10px !important;
}
.selected-one{
	border:1px solid #333;
	height:24px;
	line-height:24px;
	margin:8px;
	padding:0 5px;
}
.icon-close{margin-left:5px;}

.item-title{
	color:#666;
	line-height:25px;
	height:50px;
	overflow: hidden;
	text-overflow: ellipsis;
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
}
</style>

<ol class="breadcrumb">
    <li><a href="/">首页</a></li>
    <li><a href="#"><?php echo $nav1; ?></a></li>
    <li class="active"><?php echo $nav2; ?></li>
</ol>

<?php 
  if(!$keyword){
?>


<div class="wrap brand-type" id="select-b">
<!--     <div class="type-attrs">
        <div class="attr_name">已选:</div>
        <div class="attr_Values">
            <ul class="attr_list select-list">
            	#foreach($!one in $!selectedList)
                <li onclick="delCookie('$!one.name')"><div class="selected-one">$!one.value<img src="http://img.bstapp.cn/website/best/image/icon_s_close.png" class="icon-close"></div></li>
				#end
            </ul>
            <div class="attr_more_select">
                <a class="click_more" href="javascript:clear();"><span>重置筛选项</span><i class="ui_c_arrow"></i></a>
            </div>
        </div>
    </div> -->
    <?php 
      if(count($brand_list)>1){
      ?>
    <div class="type-attrs">
        <div class="attr_name brand-list-name">品牌:</div>
        <div class="attr_Values">
            <ul class="attr_list brand-list" data-status="close">
              <?php
              foreach ($brand_list as $key => $value) {
                echo '<li><a href='.$url.'"&brandId='.$value->brandId.'&selectedBrand='.$value->brandName.'>'.$value->brandName.'</a></li>';
              }
              ?>
            </ul>
            <div class="attr_more_select">
                <a class="click_more" href="javascript:moreBrand();"><span class="brand-more">更多</span><i class="ui_c_arrow"></i></a>
            </div>
        </div>
    </div>
    <?php 
      }
    ?>
    <div class="type-attrs clear-boder">
        <div class="attr_name">颜色:</div>
        <div class="attr_Values">
            <ul class="attr_list">
                <li><a href="<?php echo $url ?>&color=RED&selectedColor=红色" data-id="RED">红色</a></li>
                <li><a href="<?php echo $url ?>&color=ORG&selectedColor=橙色" data-id="ORG">橙色</a></li>
                <li><a href="<?php echo $url ?>&color=YEL&selectedColor=黄色" data-id="YEL">黄色</a></li>
                <li><a href="<?php echo $url ?>&color=GRE&selectedColor=绿色" data-id="GRE">绿色</a></li>
                <li><a href="<?php echo $url ?>&color=BLU&selectedColor=蓝色" data-id="BLU">蓝色</a></li>
                <li><a href="<?php echo $url ?>&color=PUR&selectedColor=紫色" data-id="PUR">紫色</a></li>
                <li><a href="<?php echo $url ?>&color=PINK&selectedColor=粉色" data-id="PINK">粉色</a></li>
                <li><a href="<?php echo $url ?>&color=BRW&selectedColor=棕色" data-id="BRW">棕色</a></li>
                <li><a href="<?php echo $url ?>&color=BLK&selectedColor=黑色" data-id="BLK">黑色</a></li>
                <li><a href="<?php echo $url ?>&color=WHT&selectedColor=白色" data-id="WHT">白色</a></li>
                <li><a href="<?php echo $url ?>&color=GREY&selectedColor=灰色" data-id="GREY">灰色</a></li>
                <li><a href="<?php echo $url ?>&color=ASSORT&selectedColor=拼色" data-id="ASSORT">拼色</a></li>
                <li><a href="<?php echo $url ?>&color=FLOWER&selectedColor=花色" data-id="FLOWER">花色</a></li>
            </ul>
        </div>
    </div>
</div>

<?php

  }
?>

<div style="margin: 10px 0;">
    <ul class="nav-filter">
        <li><a href="<?php echo $url ?>&sort=sort">推荐</a></li>
        <li><a href="<?php echo $url ?>&sort=new">新品</a></li>
        <li><a href="javascript:order()" class="list-order" data-order="<?php echo $orderBy;?>">价格
          <?php 

          if($orderBy == "asc" && $sort == "price"){
            echo '<img src="http://img.bstapp.cn/website/best/image/icon_up.png" class="order-icon">';
          }else if($orderBy == "desc" && $sort == "price"){
            echo '<img src="http://img.bstapp.cn/website/best/image/icon_down.png" class="order-icon">';
          }else{
            echo '<img src="http://img.bstapp.cn/website/best/image/icon_none.png" class="order-icon">';
          }

          ?>

        </a></li>
        <li class="item-count">(<?echo $total_rows ?>件商品)</li>
        <div class="page">
            <span class="num"><?php echo $page_index."/".$page_count; ?></span>
            <a href="<?php echo $url.'&per_page='.$parent_page; ?>"><img src="http://img.bstapp.cn/website/best/image/icon_left_enable.png"></a>
            <a href="<?php echo $url.'&per_page='.$next_page; ?>"><img src="http://img.bstapp.cn/website/best/image/icon_right_enable.png"></a>
        </div>
        <div class="clearfix"></div>
    </ul>
</div>
<div>
  <?php
    foreach ($items as $key => $item) {
  
  ?>
    <div class="col-sm-3 col-xs-4 list-item" onclick="getItemDetail(<?php echo $item->id ?>)">
        <div class="item-contain">
            <div class="brand">
                <img src="<?php echo $item->brandLogo ?>" class="brand_icon">
                <div class="brand-title">
                    <p><?php echo $item->brandName ?></p>
                    <p><?php echo $item->brandNameCH ?></p>
                </div>
            </div>
            <div class="item">
                <img src="<?php echo $item->image ?>" class="img-responsive" alt="Generic placeholder thumbnail">
            </div>
            <div class="item-price">
                <span class="price">¥<?php echo $item->salePrice ?></span>

                <?php 
                  $discount = $item->salePrice / $item->marketPrice;
                  $discount = round($discount * 10);
                  if($discount <10){
                    echo '<span class="sale">'.$discount.'折</span>';
                  }
                ?>
            </div>
            <div class="item-title"><?php echo $item->title ?></div>
        </div>
    </div>
  <?php
    }
  ?>

    <div class="clearfix"></div>
</div>

<nav style="text-align:center;">
  <?echo $this->pagination->create_links(); ?>
</nav>

<script>
function getCookie(name)//取cookies函数        
{ 
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); 
     if(arr != null) return unescape(arr[2]); return null; 
} 
function delCookie(name)//删除cookie 
{
    var exp = new Date(); 
    exp.setTime(exp.getTime() - 1); 
    var cval=getCookie(name); 
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); 
    
    location.href="$url";
}
function clear(){
	delCookie("brandId");
	delCookie("color");
	location.href="$url";
}

function moreBrand(){
	var status = $(".brand-list").data("status");
	if(status == "close"){
		$(".brand-list").css("height","auto");
		var height = $(".brand-list").height();
		$(".brand-list-name").css("height",height+"px");
		$(".brand-more").html("收起");
		$(".brand-list").data("status","open");
	}else{
		$(".brand-list").css("height","40px");
		$(".brand-list-name").css("height","40px");
		$(".brand-more").html("更多");
		$(".brand-list").data("status","close");
	}
}

function order(){
	var order = $(".list-order").data("order");
	if(order == "asc"){
		$(".brand-list").data("order","desc");
		$(".order-icon").prop("src","http://img.bstapp.cn/website/best/image/icon_down.png");
		location.href="<?php echo $url ?>&sort=price&orderBy=desc";
	}else{
		$(".brand-list").data("order","asc");
		$(".order-icon").prop("src","http://img.bstapp.cn/website/best/image/icon_up.png");
		location.href="<?php echo $url ?>&sort=price&orderBy=asc";
	}
}
</script>